<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button onclick="m1()" style="" class="" id="bt1">点击弹个窗</button>
		<button id="bt2">点我有惊喜</button>
		<button id="bt3">点我能发财</button>
		<button id="bt4">解绑第一个按钮的事件</button>
		<button id="bt5">解绑第二个按钮的事件</button>
	</body>
</html>
<script type="text/javascript">
	//事件的绑定
	//  事件--》绑定方式--》解绑
	//事件就是指发生一件事
	//  比如发表放上来这件事
	//  比如鼠标点击这件事
	//  比如输入框得到焦点这件事
	//  好多事件：onclick，momouseover，onmouseout，ondblclick，onchange。等等
	//绑定方式
	// 两种 （第一种：直接给标签添加属性绑定事件(onclick)）
	function m1(){
		alert("我是孙悟空");
	}
	
	//第二种绑定事件的方式：js通过节点操作绑定事件
	
	let oBt2 = document.querySelector("#bt2");
	oBt2.onclick=function(){
		alert("兄弟，你xx对我很好")
	}
	
	//第三种：通过对象的方式绑定事件
	let oBt3 = document.querySelector("#bt3");
	let daye = function(){
		alert(88)
	}
	oBt3.addEventListener("click",daye,false)
	
	//解绑事件--方式一
	document.querySelector("#bt4")
	.onclick=function(){
		//解绑第一个按钮
		document.querySelector("#bt1").onclick=null;
	}
	
	//解绑事件--方式二
	document.querySelector("#bt5")
	.onclick=function(){
		//解绑第一个按钮
		document.querySelector("#bt3").removeEventListener("click",daye,false);
	}
	
</script>
